<template>
  <div class="message">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <div class="message-item" v-for="(item, index) in msgList" :key="index">
      <van-cell-group>
        <van-cell :title="item.newstime" :label="item.detail">
        </van-cell>
      </van-cell-group>
    </div>
    <div class="message-push" @click="pushmsg()">
      <van-popover v-model="showPopover" :actions="actions" placement="top-end" @select="onSelect">
        <template #reference>
          <van-icon name="plus" size="0.6rem" color="#fff" />
        </template>
      </van-popover>
    </div>
    <van-empty description="暂无消息" v-if="msgList.length == 0" />
  </div>
</template>

<script>
export default {
  name: "Message",
  data () {
    return {
      showPopover: false,
      actions: [{ text: '点我推送消息' }],
      activeName: 0,
      isLoading: false,
      dot: true,
      msgList: [
        { msgid: 1, title: '消息通知', newstime: '2021-11-11', detail: '您批发的xxx商品已经下发至您的仓库，请注意查收哦！' },
        { msgid: 2, title: '消息通知', newstime: '2021-11-10', detail: '您批发的xxx商品已经下发至您的仓库，请注意查收哦！' },
        { msgid: 3, title: '消息通知', newstime: '2021-11-9', detail: '您批发的xxx商品已经下发至您的仓库，请注意查收哦！' },
        { msgid: 4, title: '消息通知', newstime: '2021-11-8', detail: '您批发的xxx商品已经下发至您的仓库，请注意查收哦！' },
        { msgid: 5, title: '消息通知', newstime: '2021-11-7', detail: '您批发的xxx商品已经下发至您的仓库，请注意查收哦！' },
      ],
    };
  },
  methods: {
    getMsgList () {
      this.axios
        .post("/applogin/noticelist", {
          shopid: localStorage.getItem('shopid'),
        })
        .then((res) => {
          this.tipsList = res.data.list;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    pushmsg () {
      //推送消息

    },
    onSelect () {
      setTimeout(() => {
        this.showPopover = true
      }, 500);
    },
    onClickLeft () {
      this.$router.push({ name: 'my' })
    },
  },
  created () {
    this.onSelect()
    setTimeout(() => {
      this.showPopover = false
    }, 4500);
    // this.getMsgList()
  },
}
</script>
<style lang="less" scoped>
.message {
  height: 100%;
  &-push {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 50px;
    bottom: 150px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #1bb89c;
  }
}
</style>